<template>
  <div class="box">

    <div class="reqister">

      <el-card style="width: 350px;margin-left: 200px;margin-top: 80px;background:none;border: none;color: white">
        <div slot="header" style="text-align: center"><h3>注册</h3></div>
        <el-form inline :model="user" :rules="reqisterrules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item class="car" prop="account">
            <div>账号:</div>
            <div style="margin-left: 10px">
              <el-input
                  placeholder="请输入账号"
                  v-model="user.account"
                  clearable>
              </el-input>
            </div>

          </el-form-item>

          <el-form-item class="car" prop="password">
            <div>密码:</div>
            <div style="margin-left: 10px">
              <el-input
                  placeholder="请输入密码"
                  v-model="user.password"
                  show-password>
              </el-input>
            </div>

          </el-form-item>
          <el-form-item class="car" prop="name">
            <div>姓名:</div>
            <div style="margin-left: 10px">
              <el-input
                  placeholder="请输入姓名"
                  v-model="user.name"
                  clearable>
              </el-input>
            </div>

          </el-form-item>
          <div style="margin-left: 5px">

            <el-button style="width: 300px" type="primary" @click="reqister()">注册</el-button>

          </div>
          <div style="margin-left: 5px">


            <el-button style="width: 300px;margin-top: 20px" @click="$router.push('/demo')">返回</el-button>
          </div>
        </el-form>

      </el-card>
    </div>

  </div>


</template>

<script>
export default {
  name: "reqister",
  data() {
    return {
      user: {},
      reqisterrules:{
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'change'},
          {min: 3, max: 9, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    reqister() {
      this.$refs.ruleForm.validate((r) => {
        if (r) {
          this.$axios.post('/api/user/register', this.user).then((res) => {
            console.log(res);
            if (res.data.status === 1) {
              this.$message.success("注册成功");

            }else {
              this.$message.error("注册失败");
            }
          });
        } else {
          this.$message.error("请填写正确资料");
        }
      });


    },
  }
}
</script>

<style scoped>
.box {
  position: relative;
  height: 400px;

}

.reqister {
  position: absolute;
  left: 30px;

}

.car div {
  display: inline-block;
}

</style>